import './cart_base.css'
import './cart_trade.css'
import './cart.css'

import Vue from 'vue'
import url from 'js/api.js'
import mixin from 'js/mixin.js'
import axios from 'axios'

new Vue({
  el: '.container',
  data: {
    cartList: null,
    total: 0,
    editingShop: null,
    editingShopIndex: -1,
    removePopup: false,
    removeData: null,
    removeMsg: ''
  },
  computed: {
    allSelected: {
      get(){
        if(this.cartList && this.cartList.length){
          return this.cartList.every(shop=>{
            return shop.checked
          })
        }
        return false
      },
      set(newVal){
        this.cartList.map(shop=>{
          shop.checked = newVal;
          shop.goodsList.map(goods=>{
            goods.checked = newVal;
          })
        })
      }
    },
    allRemoveSelected: {
      get(){
        if(this.editingShop) {
          return this.editingShop.removeChecked
        }
        return false
      },
      set(newVal){
        if(this.editingShop){
          this.editingShop.removeChecked = newVal;
          this.editingShop.goodsList.map(goods=>{
            goods.removeChecked = newVal
          })
        }
      }
    },
    selectedLists(){
      if(this.cartList && this.cartList.length){
        let arr = [];
        let total = 0;
        this.cartList.map(shop=>{
          shop.goodsList.map(goods=>{
            if(goods.checked){
              total += goods.number * goods.price;
              arr.push(goods)
            }
          })
        })
        this.total = total;
        return arr
      }
      return []
    },
    removeLists(){
      if(this.editingShop){
        let arr = [];
        this.editingShop.goodsList.map(goods=>{
          if(goods.removeChecked){
            arr.push(goods)
          }
        })
        return arr;
      }
      return []
    }
  },
  created(){
    this.getCartList()
  },
  methods: {
    getCartList(){
      axios.get(url.cartList).then(res=>{
        // 这里通过修改获取到的数据添加checked 来使this的checked数据是响应式的
        let list = res.data.cartList;
        list.map(shop=>{
          shop.checked = true;
          shop.removeChecked = false;
          shop.editing = false;
          shop.editingMsg = '编辑';
          shop.goodsList.map(goods=>{
            goods.checked = true;
            goods.removeChecked = false
          })
        });
        this.cartList = list;
      })
    },
    selectedGoods(shop,goods){
      let arr = this.editingShop ? 'removeChecked' : 'checked';
      goods[arr] = !goods[arr];
      shop[arr] = shop.goodsList.every(goods=>{
        return goods[arr]
      })
    },
    selectedShop(shop){
      let arr = this.editingShop ? 'removeChecked' : 'checked';
      shop[arr] = !shop[arr];
      shop.goodsList.map(goods=>{
        goods[arr] = shop[arr]
      })
    },
    selectedAll(){
      let arr = this.editingShop ? 'allRemoveSelected' : 'allSelected';
      this[arr] = !this[arr]
    },
    edit(shop, index){
      shop.editing = !shop.editing;
      shop.editingMsg = shop.editing ? '完成' : '编辑'
      this.cartList.map((item,i)=>{
        if(i!== index){
          item.editing = false;
          item.editingMsg = shop.editing ? '' : '编辑1'
        }
      });
      this.editingShop = shop.editing ? shop : null;
      this.editingShopIndex = shop.editing ? index : -1;
    },
    add(goods){
      axios.post(url.cartAdd, {
        id: goods.id,
        number: 1
      }).then(res=>{
        if(res.data.status === 200){
          goods.number++;
        }else {
          console.err('ajax返回不是200')
        }
      })
    },
    reduce(goods){
      if(goods.number === 1) return
      axios.post(url.cartReduce, {
        id: goods.id,
        number: 1
      }).then(res=>{
        if(res.data.status === 200){
          goods.number--;
        }else {
          console.err('ajax返回不是200')
        }
      })
    },
    remove(shop, shopIndex,goods, goodsIndex){
      this.removePopup = true;
      this.removeData = {shop, shopIndex,goods, goodsIndex};
      this.removeMsg = '确定要删除该商品吗？'
    },
    removeList(){
      this.removePopup = true;
      this.removeMsg = `确定将所选${this.removeLists.length}个商品删除？`
    },
    removeConfirm(){
      if(this.removeMsg === '确定要删除该商品吗？'){
        let {shop, shopIndex,goods, goodsIndex} = this.removeData;
        axios.post(url.cartRemove, {
          id: goods.id
        }).then(res=>{
          shop.goodsList.splice(goodsIndex,1);
          if(!shop.goodsList.length){
            this.cartList.splice(shopIndex, 1);
            this.removeShop();
          }
          this.removePopup = false;
        });
      }else {
        let ids = [];
        this.removeLists.map(goods=>{
          ids.push(goods.id)
        })
        axios.post(url.cartMremove, {
          ids
        }).then(res => {
          let arr = [];
          this.editingShop.goodsList.map(goods=>{
            let index = this.removeLists.findIndex(item => {
              return item.id === goods.id
            })
            if(index === -1){
              arr.push(goods)
            }
          })
          if(arr.length){
            this.editingShop.goodsList = arr
          }else {
            this.cartList.splice(this.editingShopIndex, 1)
            this.removeShop()
          }
          this.removePopup = false
        })
      }
    },
    removeShop(){
      this.editingShop = null
      this.editingShopIndex = -1
      this.cartList.map(shop => {
        shop.editing = false
        shop.editingMsg = '编辑'
      })
    }
  },
  mixins: [mixin]
});
